<template>
	<view class="invoice-address-container">
        <!-- 通知信息 -->
        <u-notice-bar mode="horizontal" :list="list"></u-notice-bar>
        <!-- 增票资质申请状态相关信息 -->
        <view class="audit-status" v-if="invoiceInfo && invoiceInfo.status">
            <view class="">
                <text class="wait-title">您的增票资质：</text>
                <text class="wait-status">{{ invoiceInfo.status | invoiceStatus }}</text>
                <u-button size="mini" type="error" v-if="invoiceInfo.status === 'AUDIT_PASS'" @click="handleDeleteInvoice">删除</u-button>
                <view class="" v-if="invoiceInfo.status === 'AUDIT_REFUSE'">
                    <text class="wait-title">原因：</text>
                    <text class="audit-remark">{{ invoiceInfo.audit_remark || '单位名称不符合规范'}}</text>
                </view>
            </view>
        </view>
        <!-- 增票资质申请表单 -->
        <u-cell-group :border="false">
            <u-field required label="单位名称" v-model="informationForm.company_name" placeholder="请输入单位名称" :maxlength="20" :error-message="authInfoRules.company_name_msg" />
            <u-field required label="纳税人识别号" v-model="informationForm.taxpayer_code" placeholder="请输入纳税人识别号" :minlength="15" :maxlength="20" :error-message="authInfoRules.taxpayer_code_msg" />
            <u-field required label="注册地址" v-model="informationForm.register_address" placeholder="请输入注册地址" :error-message="authInfoRules.register_address_msg" />
            <u-field required label="注册电话" v-model="informationForm.register_tel" placeholder="请输入注册电话" :maxlength="13" :error-message="authInfoRules.register_tel_msg" />
            <u-field required label="开户银行" v-model="informationForm.bank_name" placeholder="请输入开户银行" :error-message="authInfoRules.bank_name_msg" />
            <u-field required label="银行账号" v-model="informationForm.bank_account" placeholder="请输入银行账号" :maxlength="20" :error-message="authInfoRules.bank_account_msg" />
        </u-cell-group>
        <view class="certificate u-flex" @click="agreed = !agreed">
            <u-icon :name="agreed ? 'xuanze' : 'choose'" custom-prefix="custom-icon"></u-icon>
            <view class="certificate-agreed">我已阅读并同意<text class="certificate-book" @click.stop="showCertificateBook = true">《增票资质确认书》</text></view>
        </view>
        <view class="save-btn" v-if="canOpera" @click="saveInvoiceInfo">
            <view class="btn">
                <text class="u-m-l-10">{{ invoiceInfo && invoiceInfo.status === 'AUDIT_REFUSE' ? '重新审核' : '保存' }}</text>
            </view>
        </view>
        <view class="bigBtn">
            <navigator class="btn" hover-class="none" url="/mine-module/invoice-address">
                <text class="u-m-l-10">查看增票地址</text>
            </navigator>
        </view>
        <!-- 增票资质确认书弹出层 -->
        <u-popup class="certificate-book-view" v-model="showCertificateBook" mode="bottom" length="70%" border-radius="20" :safe-area-inset-bottom="true">
            <view class="u-p-30 u-text-center" style="font-weight: 600;">申请开具增值税专用发票确认书</view>
            <view class="u-m-20">
                根据国家税法及发票管理相关规定，任何单位和个人不得要求他人为自己开具与实际经营业务情况不符的增值税专用发票【包括并不限于
                （1）在没有货物采购或者没有接受应税劳务的情况下要求他人为自己开具增值税专用发票；
                （2）虽有货物采购或者接受应税劳务但要求他人为自己开具数量或金额与实际情况不符的增值税专用发票】，否则属于“虚开增值税专用发票”。
            </view>
            <view class="u-m-20">
                我已充分了解上述各项相关国家税法和发票管理规定，并确认仅就我司实际购买商品或服务索取发票。
                如我司未按国家相关规定申请开具或使用增值税专用发票，由我司自行承担相应法律后果。
            </view>
        </u-popup>
	</view>
</template>

<script>
    import * as API_Members from '@/api/members'
    import { RegExp } from '@/ui-utils'
	export default {
		data() {
			return {
                list: [
                    '1）注意有效增值税发票开票资质仅为一个。2)本页面信息仅供增值税专用发票-资质审核使用，切勿进行支付相关业务，谨防上当受骗。'
                ],
                /** 增票资质 表单 */
                informationForm: {},
                /** 是否同意 增票资质确认书 */
                agreed: false,
                /** 是否显示 增票资质确认书 */
                showCertificateBook: false,
                /** 基础信息 表单规则 */
                authInfoRules: {
                  company_name_msg: '',
                  taxpayer_code_msg: '',
                  register_address_msg: '',
                  register_tel_msg: '',
                  bank_name_msg: '',
                  bank_account_msg: ''
                },
                /** 增票资质申请相关信息 */
                invoiceInfo: {}
			};
		},
        computed: {
            // 是否可以进行保存操作
            canOpera() {
                return !this.invoiceInfo || this.invoiceInfo.status === 'AUDIT_PASS' || this.invoiceInfo.status === 'AUDIT_REFUSE'
            }
        },
        filters: {
            // 赠票资质审核状态过滤
            invoiceStatus(status) {
                switch (status) {
                    case 'NEW_APPLY': return '平台审核中'
                    case 'AUDIT_PASS': return '已通过审核'
                    case 'AUDIT_REFUSE': return '未通过审核'
                }
            }
        },
        onShow() {
            this.GET_InvoiceInfo()
        },
        methods: {
            /** 获取会员增票信息详情 */
            GET_InvoiceInfo() {
                API_Members.queryInvoiceInfo().then(res => {
                    this.invoiceInfo = res
                    const { company_name, taxpayer_code, register_address, register_tel, bank_name, bank_account } = res
                    this.informationForm.company_name = company_name || ''
                    this.informationForm.taxpayer_code = taxpayer_code || ''
                    this.informationForm.register_address = register_address || ''
                    this.informationForm.register_tel = register_tel || ''
                    this.informationForm.bank_name = bank_name || ''
                    this.informationForm.bank_account = bank_account || ''
                })
            },
            /** 删除增票资质 */
            handleDeleteInvoice(){
                uni.showModal({
                    title: '提示',
                    content: '您选择的增值税发票资质将被删除，删除后将不可修复。是否确认？',
                    confirmColor: '#ff5000',
                    success: (res) => {
                        if(res.confirm) {
                            API_Members.deleteInvoiceInfo(this.invoiceInfo.id).then(() => {
                                this.$u.toast('删除成功')
                                this.GET_InvoiceInfo()
                            })
                        }
                    }
                })
            },
            /** 会员增票资质提交申请 */
            saveInvoiceInfo(){
                // 单位名称
                if(!this.informationForm.company_name) {
                    this.authInfoRules.company_name_msg = '请输入单位名称'
                    return
                } else {
                    this.authInfoRules.company_name_msg = ''
                }
                // 纳税人识别号
                if(!this.informationForm.taxpayer_code) {
                    this.authInfoRules.taxpayer_code_msg = '请填写纳税人识别号'
                    return
                } else if (!RegExp.TINumber.test(this.informationForm.taxpayer_code)) {
                    this.authInfoRules.taxpayer_code_msg = '纳税人识别号不正确'
                    return
                } else {
                    this.authInfoRules.taxpayer_code_msg = ''
                }
                // 注册地址
                if(!this.informationForm.register_address) {
                    this.authInfoRules.register_address_msg = '请输入注册地址'
                    return
                } else {
                    this.authInfoRules.register_address_msg = ''
                }

                // 注册电话
                if(!this.informationForm.register_tel) {
                    this.authInfoRules.register_tel_msg = '请输入注册电话'
                    return
                } else if(!RegExp.TEL.test(this.informationForm.register_tel) && !RegExp.mobile.test(this.informationForm.register_tel)) {
                    this.authInfoRules.register_tel_msg = '请输入正确的注册电话'
                    return
                } else {
                    this.authInfoRules.register_tel_msg = ''
                }

                // 请输入开户银行
                if(!this.informationForm.bank_name) {
                    this.authInfoRules.bank_name_msg = '请输入开户银行'
                    return
                } else {
                    this.authInfoRules.bank_name_msg = ''
                }

                // 请输入银行账号
                if(!this.informationForm.bank_account) {
                    this.authInfoRules.bank_account_msg = '请输入银行账号'
                    return
                } else {
                    this.authInfoRules.bank_account_msg = ''
                }
                if(!this.agreed) {
                    this.$u.toast('请先同意协议！')
                    return
                }
                let params = { ...this.informationForm }
                if(!this.invoiceInfo) {
                    params = { ...params, status: 'NEW_APPLY' }
                } else if (this.invoiceInfo.status) {
                    params = { ...this.invoiceInfo, ...params,  }
                }
                Promise.all([
                    this.invoiceInfo ? API_Members.changeTicketInformation(params) : API_Members.ticketInformationApply(params)
                ]).then(_ => {
                    this.GET_InvoiceInfo()
                    this.$u.toast('提交成功，请耐心等待审核')
                })
            }
        }
	}
</script>

<style lang="scss" scoped>
.invoice-address-container {
	position: relative;
}
.audit-status{
    background: #FFFDEE;
    padding: 20rpx;
    margin-top: 20rpx;
    .wait-title {
        font-weight: 600;
    }
    .wait-status {
        color: #71B247;
        margin-right: 20rpx;
        word-break: break-all;
    }
    .audit-remark {
        color: #ff5000;
        word-break: break-all;
    }
}
.certificate {
    width: 100%;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    line-height: 48rpx;
    background-color: #FFFFFF;
    color: #333333;
    font-size: 28rpx;
    overflow: hidden;
    .certificate-agreed {
        display: inline-block;
        margin-left: 20rpx;
        color: #333333;
        font-size: 28rpx;
        .certificate-book {
            color: #ff5000;
            cursor: pointer;
        }
    }
}
.save-btn {
    .btn {
	    background: linear-gradient(145deg,#ff9000,#ff5000 77%);
        color: #FFFFFF;
        padding: 20rpx;
        text-align: center;
        border-radius: 40rpx;
        margin: 0 30rpx;
    }
}
.bigBtn {
	margin-top: 20px;
	width: 100%;
	.btn {
	    background: linear-gradient(145deg,#ff9000,#ff5000 77%);
		color: #FFFFFF;
		padding: 20rpx;
		text-align: center;
		border-radius: 40rpx;
		margin: 0 30rpx;
	}
}
/deep/ {
    .u-field {
        padding: 20rpx 30rpx !important;
    }
    .u-error-message {
        padding-left: 165rpx !important;
    }
    .custom-icon-xuanze {
        color: #ff5000;
        font-size: 35rpx !important;
    }
    .custom-icon-choose {
        font-size: 35rpx !important;
    }
}
</style>
